.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 99vw;
  height: 100vh;

  &.closeLogo {
    display: none;
  }

  .container {
    z-index: 10;
    position: relative;
    display: flex;
    justify-content: center;
    width: 700px;
    height: 400px;

    .logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: scaleAnimation 1s ease-in-out;
      animation-fill-mode: forwards;

      &.move-animate {
        animation: moveLogoAnimation 1s ease-in-out;
        animation-fill-mode: forwards;
      }

      @keyframes scaleAnimation {
        0% {
          opacity: 0;
        }
        1% {
          transform: translate(-50%, -50%) scale(2);
          opacity: 1;
        }
        100% {
          transform: translate(-50%, -50%) scale(1);
        }
      }
      @keyframes moveLogoAnimation {
        0%,
        10% {
          transform: translateX(0) translateY(-50%);
          animation-timing-function: cubic-bezier(0.4, 0.7, 0.8, 0.9) !important;
        }
        30% {
          transform: translateX(10px) translateY(-50%);
        }
        100% {
          transform: translateX(-200px) translateY(-50%);
        }
      }
    }

    .text {
      position: absolute;
      right: 0;
      top: 50%;
      font-size: 55px;
      font-weight: 500;
      letter-spacing: 5px;
      transform: translate(-50%, -50%);
      opacity: 0;

      &::after {
        display: block;
        content: 'Geometry Smart';
        font-size: 22px;
      }

      &.font-show {
        animation: fontShowAnimation 1s ease-in-out forwards;
        @keyframes fontShowAnimation {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }
      }
    }
  }
}
